iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 21
1

熟CSS的朋友一定知道transition,它是一種靠觸發執行的動畫,無法循環輪播,按鈕上的hover就很常用到,不熟的話推薦參考我的隊友 卡羅奇奇教學文章。

卡羅奇奇
30天讓設計師搞定CSS/SVG動畫
(https://ithelp.ithome.com.tw/users/20111500/ironman/1788)

我們除了可以用css寫動畫外,vue也給我們封裝好的<transition>元件讓我們使用,雖然一般會建議使用css寫動畫對效能比較好,但還是可以認識一下vue的動畫,也許會有需要的時候。

何時可加入漸變

vue的<transition>跟css很像,都是能給指定單一元件加入漸變動畫,也就是在進入(開始)到離開(結束)的過程中加入漸變的效果,那漸變的效果可以用在哪呢?你可以用在以下4個地方:

  • v-if 條件渲染
  • v-show 條件顯示
  • 動態元件
  • 元件的根節點

漸變的分類

Vue已經定義好class,並在漸變效果中加入,共有以下6個class name讓你加入style:

  • v-enter 使用它來定義「進入漸變」時開始的樣式。
    • 只存在元件插入前,元件插入後就移除。
  • v-enter-active 使用它來定義「進入漸變」的過程效果,可以設定漸變過程的時間(duration)及延遲(delay)和速度曲線 ( easing curve)。
    • 在元件被插入前生效,並於完成動畫時移除。
  • v-enter-to 使用它來定義「進入漸變」後結束的樣式。
    • 在元件被插入之後生效,同時v-enter被移除,並於完成「進入漸變」動畫時移除。
  • v-leave 使用它來定義「離開漸變」時開始的樣式。
    • 在觸發元件「離開漸變」時生效,接著馬上移除。
  • v-leave-active 使用它來定義「離開漸變」的過程效果,可以設定漸變過程的時間(duration)及延遲(delay)和速度曲線 ( easing curve)。
    • 在觸發元件「離開漸變」時生效,並於完成動畫後移除。
  • v-leave-to 使用它來定義「離開漸變」後結束的樣式。
    • 在觸發「離開漸變」時生效,同時v-leave被移除,並於完成「離開漸變」動畫時移除。

配和以下圖表會更好懂:
https://ithelp.ithome.com.tw/upload/images/20181104/201119561323Qh4py6.png

圖片來源:https://vuejs.org/v2/guide/transitions.html#Transition-Classes

transition自定名稱

但如果動畫很多組,但名字都一樣會亂掉吧!其實名稱是能自定前綴字的喔!
它預設為v-開頭,我們可以把它改掉,但要在<transition>的屬性設定name,例如<transition name="shape"></transition>而css class name當然就如shape-enter這樣。

好!那該來個完整的簡單範例了:

transition動畫範例

我來做一個「蟻人縮放控制器」按下按鈕後蟻人就縮小的動畫,實做如下:

<template>
  <div id="app">
    <div class="main">
      <button @click="change = !change">縮放控制器</button>
      <transition name="zoom">
        <div v-if="change" class="ant_man_style"></div>
      </transition>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        change: true
      }
    }
  }
</script>

<style>
  .main {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  button {
    margin-bottom: 20px;
  }
  .ant_man_style {
    background: url(../assets/ant_man.png) no-repeat center center;
    background-size: contain;
    width: 200px;
    height: 200px;
  }
  .zoom-enter, .zoom-leave-to {
    width: 0px;
    height: 0px;
  }
  .zoom-enter-active, .zoom-leave-active {
    transition: width 1s, height 1s;
  }
</style>
  • 我利用v-if來做元件的進、出,@click來做切換,目前元件已經在頁面上了,所以是true(顯示),按下按鈕後轉為false(離開),當然再次按下會再回到true(顯示)。
  • 當第一次按下後轉為false(離開),我想要它縮小離開,所以要從原本預設的200px(離開漸變的開始)漸變到0px(離開漸變的結束zoom-leave-to)。
    再次按下後,我要它從0px(進入漸變的開始zoom-enter)漸變到原本預設的200px。
    因此我設定了zoom-leave-tozoom-enter為大小0px。
  • 縮放的過程我想要它的速度為1秒,並且控制大小長跟寬,所以我在.zoom-enter-active, .zoom-leave-active設定了transition: width 1s, height 1s;

如果忘記之前學的v-ifv-on可以再來看一下
條件渲染v-if ( https://ithelp.ithome.com.tw/articles/10205097 )
事件處理v-on ( https://ithelp.ithome.com.tw/articles/10206346 )

不算難對吧!提醒一下,使用網路圖片要注意版權喔!明天我們再繼續!


上一篇
Vue[20]-指令
下一篇
Vue[22]-動畫(二)
系列文
網頁設計靠 Vue.js 轉前端30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言